import React from "react";
import ReactDOM from "react-dom";
import "antd/dist/antd.css";
import "./index.css";
import { Table, Tag, Space } from "antd";

const columns = [
  {
    title: "数据模型",
    dataIndex: "name",
    key: "name",
    width: "15%"
  },
  {
    title: "版本号",
    dataIndex: "version",
    width: "10%"
  },
  {
    title: "注册时间",
    dataIndex: "start_at",
    width: "20%"
  },
  {
    title: "包含文件",
    dataIndex: "file",
    width: "10%"
  },
  {
    title: "应用服务",
    dataIndex: "serve",
    width: "10%"
  },
  {
    title: "备注",
    dataIndex: "remark",
    width: "10%"
  },
  {
    title: '操作',
    key: 'tags',
    dataIndex: 'tags',
    render: tags => (
      <>
        {tags.map(tag => {
          let color = tag.length > 5 ? 'geekblue' : 'green';
          if (tag === 'loser') {
            color = 'volcano';
          }
          return (
            <Tag color={color} key={tag}>
             <buton onClick="">{tag}</buton>
            </Tag>
          );
        })}
      </>
    ),
     width: "40%"
  }
];

const data = [
  {
    key: 1,
    name: "John Brown sr.",
    age: 60,
    address: "New York No. 1 Lake Park",
    tags:[],
    children: [
      {
        key: 11,
        name: "John Brown",
        age: 42,
        address: "New York No. 2 Lake Park",
        tags: ['developer'],
        
      },
      {
        key: 12,
        name: "John Brown jr.",
        tags: ['nice', 'developer'],
        address: "New York No. 3 Lake Park"
      },
      {
        key: 13,
        name: "Jim Green sr.",
        age: 72,
        address: "London No. 1 Lake Park",
        tags: ['nice', 'developer','good'],
      }
    ]
  },
  {
    key: 2,
    name: "Joe Black",
    age: 32,
    address: "Sidney No. 1 Lake Park",
    tags: ['nice',],
  }
];

// rowSelection objects indicates the need for row selection
const rowSelection = {
  onChange: (selectedRowKeys, selectedRows) => {
    console.log(
      `selectedRowKeys: ${selectedRowKeys}`,
      "selectedRows: ",
      selectedRows
    );
  },
  onSelect: (record, selected, selectedRows) => {
    console.log(record, selected, selectedRows);
  },
  onSelectAll: (selected, selectedRows, changeRows) => {
    console.log(selected, selectedRows, changeRows);
  }
};

function TreeData() {
  // const [checkStrictly, setCheckStrictly] = React.useState(false);
  return (
    <>
      <Table columns={columns} dataSource={data} />
    </>
  );
}

ReactDOM.render(<TreeData />, document.getElementById("container"));
